<template>
	<view class="box ">
		<view class="nav">
			<u-navbar :is-back="false" title="商城" :border-bottom="false" :title-bold="true"></u-navbar>
		</view>
		<view class="search" :style="{top:customBarHeight-4 + 'px'}">
			<u-search placeholder="请输入搜索内容" v-model="keyword" @focus="goSearch"></u-search>
			<u-tabs :list="list" :is-scroll="true" v-model="current" gutter='40' active-color="#fa3534"
				:bar-style="{background:'#fa3534'}" :bold="true" @change="change"></u-tabs>
		</view>
		<!-- tabs -->

		<!-- 商品数据 -->
		<view class="goodsList" :style="{marginTop:customBarHeight + 'px'}">
			<u-waterfall v-model="flowList" ref="uWaterfall1" v-if="flowList.length>0">
				<template v-slot:left="{leftList}">
					<view class="demo-warter" v-for="(item, index) in leftList" :key="index" @click="goDedail(item.id)">
						<u-lazy-load v-if="item.images_format" threshold="-450" border-radius="10"
							:image="item.images_format[0]" :index="index"></u-lazy-load>
						<view class="demo-title">
							{{item.name}}
						</view>
						<view class="add_price jsbc">
							<view class="demo-price">
								￥{{item.min_price||item.price}}元
							</view>
							<view class="icon">
								<u-icon :name="'/static/home/jrgwc.png'" size="60"></u-icon>
							</view>
						</view>
					</view>
				</template>
				<template v-slot:right="{rightList}">
					<view class="demo-warter" v-for="(item, index) in rightList" :key="index"
						@click="goDedail(item.id)">
						<u-lazy-load v-if="item.images_format" threshold="-450" border-radius="10"
							:image="item.images_format[0]" :index="index"></u-lazy-load>
						<view class="demo-title">
							{{item.name}}
						</view>
						<view class="add_price jsbc">
							<view class="demo-price">
								￥{{item.min_price||item.price}}元
							</view>
							<view class="icon">
								<u-icon :name="'/static/home/jrgwc.png'" size="60"></u-icon>
							</view>
						</view>

					</view>
				</template>
			</u-waterfall>
				<u-empty text="没有数据呢~" mode="data" v-if="flowList.length==0" margin-top="60"></u-empty>
			<u-loadmore bg-color="rgb(245, 245, 245)" :status="loadStatus" @loadmore="addRandomData"></u-loadmore>
		</view>
	</view>
</template>
<script>
	import {
		closeload,
		tiao,
		toastload
	} from '@/utils/common.js'
	import baseUrl from '@/config/config.js'
	import {
		getGoodsSort,
		getSortList
	} from '@/api/index.js'
	export default {
		data() {
			return {
				keyword: "",
				loadStatus: 'loadmore',
				flowList: [],
				page: 1,
				goodList: [],
				list: [],
				current: 0,
				statusBarHeight: uni.getStorageSync("statusBarHeight") || "",
				customBarHeight: uni.getStorageSync("customBarHeight") || ""

			}
		},

		onLoad(res) {
			this.init()

		},
		onReachBottom() {
			if (this.loadStatus == 'loadmore') {
				this.getData()
			}
		},
		methods: {
			init() {
				getGoodsSort().then(res => {
					console.log(res);
					this.list = res.data
					this.getData()
				})
			},
			goPage(url) {
				tiao(url)
			},
			addRandomData() {
				for (let i = 0; i < this.goodList.length; i++) {
					// 先转成字符串再转成对象，避免数组对象引用导致数据混乱
					let item = JSON.parse(JSON.stringify(this.goodList[i]))
					this.flowList.push(item);
				}
			},
			change(index) {
				console.log("index", index);
				this.current = index
				this.page = 1
				this.getData()
			},
			goDedail(item) {
				tiao('/page/goodsDetail/goodsDetail?id=' + item.id)
			},
			getData() {
				this.loadStatus = 'loading'
				let id = this.list[this.current].id
				getSortList(id, {
					page: this.page
				}).then(res => {
					this.goodList = res.list
					if (res.page > res.last_page) {
						this.page++
						this.loadStatus = 'loadmore'
					} else {
						this.loadStatus = 'nomore'
					}
					if (res.list.length == 0) {
						this.loadStatus = 'nomore'
						return
					}
					this.addRandomData()
				})
			},
			goSearch() {
				uni.navigateTo({
					url: '/page/search/search'
				})
			},
		}
	}
</script>
<style lang="scss" scoped>
	.search {
		width: 750rpx;
		position: fixed;
		left: 0;
		background-color: #fff;
		z-index: 999;
		box-sizing: border-box;
		padding: 10px;
		transition: all linear 0.3s;
	}

	.demo-warter {
		border-radius: 8px;
		margin: 5px;
		background-color: #ffffff;
		padding: 8px;
		position: relative;
	}

	.u-close {
		position: absolute;
		top: 32rpx;
		right: 32rpx;
	}

	.demo-image {
		width: 100%;
		border-radius: 4px;
	}

	.demo-title {
		font-size: 30rpx;
		margin-top: 5px;
		color: $u-main-color;
	}

	.demo-tag {
		display: flex;
		margin-top: 5px;
	}

	.demo-tag-owner {
		background-color: $u-type-error;
		color: #FFFFFF;
		display: flex;
		align-items: center;
		padding: 4rpx 14rpx;
		border-radius: 50rpx;
		font-size: 20rpx;
		line-height: 1;
	}

	.demo-tag-text {
		border: 1px solid $u-type-primary;
		color: $u-type-primary;
		margin-left: 10px;
		border-radius: 50rpx;
		line-height: 1;
		padding: 4rpx 14rpx;
		display: flex;
		align-items: center;
		border-radius: 50rpx;
		font-size: 20rpx;
	}

	.demo-price {
		font-size: 30rpx;
		color: $u-type-error;
		margin-top: 5px;
	}

	.demo-shop {
		font-size: 22rpx;
		color: $u-tips-color;
		margin-top: 5px;
	}
	.goodsList{
		width: 750rpx;
		box-sizing: border-box;
		padding: 1rpx;
	}
</style>